<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>


    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/elementui/index.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app" style="border: 1px solid black">
<!--    <canvas id="canvas" width="1000" height="1000"></canvas>-->
</div>

<div id="toolbar">
    <div id="toolbar-header">
        <div id="toolbar-draw" style="flex: 1">
            <div>工具条</div>
            <div style="flex: 1;"></div>
        </div>
        <div style="width: 40px;line-height: 20px;font-size: 22px"></div>
        <div @click="() => {this.visible = !this.visible}" style="width: 40px;line-height: 20px;font-size: 22px">{{visible ? '-' : '+'}}</div>
    </div>
    <div style="padding: 10px;width: 100%;box-sizing: border-box">
        <el-form style="width: 100%" label-width="40px">
            <el-form-item style="margin: 5px" label="缩放">
                <el-slider :min="1" :max="150" v-model="scale"></el-slider>
            </el-form-item>
        </el-form>
        <el-form size="mini" inline>
            <el-form-item style="margin: 5px"  label-width="0">
                <el-button @click="handleSave">保存</el-button>
                <el-button @click="initSave">刷新</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div id="toolbar-content" v-show="visible">
        <el-form size="mini">
            <el-form-item label="页面" label-width="30">
                <el-select  @change='canvasIndexChange' :value="canvasIndex">
                    <el-option v-for="item in pages" :value="item.value" :label="item.label"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName">
            <el-tab-pane label="定位点配置" name="point">
                <el-form size="mini" label-width="80px">
                    <el-form-item label-width="0">
                        <el-button :type="model === 'point' ? 'warning' : 'text'" @click="changeModel('point')">{{model === 'point'? '停止': '添加定位点' }}</el-button>
                    </el-form-item>
                    <el-form-item v-for="item in pointers" :label="`定位点:${item.text}`" >
                        <span style="margin: 0;">{{`坐标:(${item.position[0]},${item.position[1]});宽:高 ${item.position[2]}:${item.position[3]}`}}</span>
                        <el-button type="text" style="color: #F00" @click="deletePointers(item)">删除</el-button>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="考号区域" name="code">
                <div v-if="freeRect.length > 0">
                    <el-button type="text" style="color:red" @click="freeToSave">点击保存红色覆盖区域:完成学号区域</el-button>
                </div>
                <el-form v-if="save.length > 0 && save[0].code" size="mini" label-width="80px">
                    <el-form-item label-width="0">
                        <el-button type="text" @click="clearSelectItems">重做</el-button>
                    </el-form-item>
                </el-form>

                <div v-else>
                    <div style="display: flex">
                        <h4 style="margin: 0;padding: 0">创建涂框格式</h4>
                        <el-button
                                :disabled="(!!setting && !!setting.target)"
                                @click="() => {this.hiddenAddItem = !this.hiddenAddItem}" size="mini" type="text">{{hiddenAddItem ? "显示" : "隐藏"}}</el-button>

                    </div>
                    <div v-show="!hiddenAddItem && !(setting && setting.target)">
                        <el-form size="mini">
                            <el-form-item style="margin-bottom: 5px" label="创建方式1:">
                                <el-button
                                        :style="{
                                           color: model==='template' ? 'gray' : ''
                                           }"
                                        @click="changeModel('template')" type="text">{{model==='template' ? '请框选一个填涂区域' : '识别生产'}}</el-button>
                            </el-form-item>

                        </el-form>
                        <el-form size="mini">
                            <el-form-item style="margin-bottom: 5px" label="创建方式2:">
                                <el-button type="text"
                                           :style="{
                                           color: includesCreateSelectInEventList ? 'gray' : ''
                                           }"
                                           @click="handCreateSelect">{{includesCreateSelectInEventList ? "请点击答题卡任意地方创建/取消":"手动创建"}}</el-button>
                            </el-form-item>

                            <el-form label-position="right" label-width="89px" size="mini" inline>
                                <!--
                                                                <el-form-item  style="margin-bottom: 5px" label="填涂方格高:">
                                                                    <el-input-number :precision="3" :step="0.5" v-model="createSelect.h" style="text-align: left" :min="1" :max="100"></el-input-number>

                                                                </el-form-item>
                                                                <el-form-item style="margin-bottom: 5px" label="填涂方格宽:">
                                                                    <el-input-number :precision="3" :step="0.5" v-model="createSelect.w" :min="5" :max="100"></el-input-number>
                                                                </el-form-item>
                                                                <el-form-item style="margin-bottom: 5px" label="方格间隔:">
                                                                    <el-input-number :precision="3" :step="0.5" v-model="createSelect.s" :min="5" :max="100"></el-input-number>
                                                                </el-form-item>-->
                                <el-form-item style="margin-bottom: 5px" label="方格数量:">
                                    <el-input-number v-model="createSelect.n" :min="1" :max="10"></el-input-number>
                                </el-form-item>
                                <el-form-item style="margin-bottom: 5px" label="方向:">
                                    <el-radio v-model="createSelect.f" label="h">横向</el-radio>
                                    <el-radio v-model="createSelect.f" label="s">竖向</el-radio>
                                </el-form-item>
                            </el-form>
                        </el-form>
                    </div>
                    <h4 style="margin: 0;padding: 0">涂框列表</h4>
                    <el-form size="mini" v-for="(item, index) in templateCache" :key="index" label-position="right" label-width="50px" size="mini" inline>
                        <div style="display: flex">
                            <h5 style="">{{index+1}}. 填涂格式({{item.n}}选项 来自{{item.ai ? '识别': "手动"}})</h5>
                            <el-button size="mini" type="text" v-show="item.target === setting.target" @click="overLookTemplate(item)">确定</el-button>
                            <el-button type="text" v-show="!setting.target" :style="{color: includesCopyToPaperInEventList ? 'gray' : ''}" :disabled="model === 'autoRectByTemplate'" @click="copyToPaper(item.target)">
                                {{ includesCopyToPaperInEventList ? '停止复制' : '复制到试卷' }}
                            </el-button>
                            <el-button type="text" v-show="!setting.target"
                                       :style="{color: model === 'autoRectByTemplate' ? 'gray' : ''}"
                                       :disabled="includesCopyToPaperInEventList"
                                       @click="changeModel('autoRectByTemplate', item)">{{model === 'autoRectByTemplate' ? '请框选/点击结束': '自动设置'}}</el-button>

                            <el-button size="mini" type="text" v-show="!setting.target" @click="lookTemplate(item.target, true)">查看</el-button>
                            <el-button size="mini" type="text" style="color: red" v-show="!setting.target" @click="deleteTemplate(item.target)">删除</el-button>
                        </div>

                        <template v-if="setting && item.target === setting.target && !item.ai">
                            <el-form-item  style="margin-bottom: 5px" label="高:">
                                <el-input-number  :precision="3" :step="0.5" @change="settingChange('sh', $event)" :value="setting.sh" style="width: 110px;text-align: left" :min="1" :max="100"></el-input-number>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 5px" label="宽:">
                                <el-input-number :precision="3" :step="0.5" @change="settingChange('sw', $event)" :value="setting.sw" style="width: 110px;text-align: left" :min="5" :max="100"></el-input-number>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 5px" label="间隔:">
                                <el-input-number :precision="3" :step="0.5" @change="settingChange('s', $event)" :value="setting.s" style="width: 110px;text-align: left"  :min="2" :max="100"></el-input-number>
                            </el-form-item>
                        </template>

                    </el-form>
                    <div v-if="templateCache.length === 0">请添加涂框格式</div>

                </div>


            </el-tab-pane>
            <el-tab-pane label="客观题" name="objective">
                <div v-if="noFinishObjectiveQuestions.length !== 0">
                    <el-form :inline="true" size="mini">
                        <el-form-item class="_margin_bottom_small main_color" label="客观题总数">
                            <span>{{objectiveQuestions.length}}题</span>
                        </el-form-item>
                        <el-form-item class="_margin_bottom_small main_color" label="无覆盖区域的客观题">
                            <span>{{noFinishObjectiveQuestions.length}}题</span>
                        </el-form-item>
                        <el-form-item label="题号顺序:">
                            <el-radio v-model="sort" label="yx">横向</el-radio>
                            <el-radio v-model="sort" label="xy">竖向</el-radio>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="freeToSave" size="mini">红色涂框绑定题目</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="save && save.length > 0 && save[canvasIndex].objective && save[canvasIndex].objective.length > 0" size="mini" label-width="80px">
                        <el-form-item label-width="0">
                            <el-button type="text" @click="clearSelectItems">重做</el-button>
                        </el-form-item>
                    </el-form>
                    <div v-else>
                        <div style="display: flex">
                            <h4 style="margin: 0;padding: 0">创建涂框格式</h4>
                            <el-button
                                    :disabled="(!!setting && !!setting.target)"
                                    @click="() => {this.hiddenAddItem = !this.hiddenAddItem}" size="mini" type="text">{{hiddenAddItem ? "显示" : "隐藏"}}</el-button>

                        </div>
                        <div v-show="!hiddenAddItem && !(setting && setting.target)">
                            <el-form size="mini">
                                <el-form-item style="margin-bottom: 5px" label="创建方式1:">
                                    <el-button
                                            :style="{
                                           color: model==='template' ? 'gray' : ''
                                           }"
                                            @click="changeModel('template')" type="text">{{model==='template' ? '请框选一个填涂区域' : '识别生产'}}</el-button>
                                </el-form-item>

                            </el-form>
                            <el-form size="mini">
                                <el-form-item style="margin-bottom: 5px" label="创建方式2:">
                                    <el-button type="text"
                                               :style="{
                                           color: includesCreateSelectInEventList ? 'gray' : ''
                                           }"
                                               @click="handCreateSelect">{{includesCreateSelectInEventList ? "请点击答题卡任意地方创建/取消":"手动创建"}}</el-button>
                                </el-form-item>

                                <el-form label-position="right" label-width="89px" size="mini" inline>
                                    <!--
                                                                    <el-form-item  style="margin-bottom: 5px" label="填涂方格高:">
                                                                        <el-input-number :precision="3" :step="0.5" v-model="createSelect.h" style="text-align: left" :min="1" :max="100"></el-input-number>

                                                                    </el-form-item>
                                                                    <el-form-item style="margin-bottom: 5px" label="填涂方格宽:">
                                                                        <el-input-number :precision="3" :step="0.5" v-model="createSelect.w" :min="5" :max="100"></el-input-number>
                                                                    </el-form-item>
                                                                    <el-form-item style="margin-bottom: 5px" label="方格间隔:">
                                                                        <el-input-number :precision="3" :step="0.5" v-model="createSelect.s" :min="5" :max="100"></el-input-number>
                                                                    </el-form-item>-->
                                    <el-form-item style="margin-bottom: 5px" label="方格数量:">
                                        <el-input-number v-model="createSelect.n" :min="1" :max="10"></el-input-number>
                                    </el-form-item>
                                    <el-form-item style="margin-bottom: 5px" label="方向:">
                                        <el-radio v-model="createSelect.f" label="h">横向</el-radio>
                                        <el-radio v-model="createSelect.f" label="s">竖向</el-radio>
                                    </el-form-item>
                                </el-form>
                            </el-form>
                        </div>
                        <h4 style="margin: 0;padding: 0">涂框列表</h4>
                        <el-form size="mini" v-for="(item, index) in templateCache" :key="index" label-position="right" label-width="50px" size="mini" inline>
                            <div style="display: flex">
                                <h5 style="">{{index+1}}. 填涂格式({{item.n}}选项 来自{{item.ai ? '识别': "手动"}})</h5>
                                <el-button size="mini" type="text" v-show="item.target === setting.target" @click="overLookTemplate(item)">确定</el-button>
                                <el-button type="text" v-show="!setting.target" :style="{color: includesCopyToPaperInEventList ? 'gray' : ''}" :disabled="model === 'autoRectByTemplate'" @click="copyToPaper(item.target)">
                                    {{ includesCopyToPaperInEventList ? '停止复制' : '复制到试卷' }}
                                </el-button>
                                <el-button type="text" v-show="!setting.target"
                                           :style="{color: model === 'autoRectByTemplate' ? 'gray' : ''}"
                                           :disabled="includesCopyToPaperInEventList"
                                           @click="changeModel('autoRectByTemplate', item)">{{model === 'autoRectByTemplate' ? '请框选/点击结束': '自动设置'}}</el-button>

                                <el-button size="mini" type="text" v-show="!setting.target" @click="lookTemplate(item.target, true)">查看</el-button>
                                <el-button size="mini" type="text" style="color: red" v-show="!setting.target" @click="deleteTemplate(item.target)">删除</el-button>
                            </div>

                            <template v-if="setting && item.target === setting.target && !item.ai">
                                <el-form-item  style="margin-bottom: 5px" label="高:">
                                    <el-input-number  :precision="3" :step="0.5" @change="settingChange('sh', $event)" :value="setting.sh" style="width: 110px;text-align: left" :min="1" :max="100"></el-input-number>
                                </el-form-item>
                                <el-form-item style="margin-bottom: 5px" label="宽:">
                                    <el-input-number :precision="3" :step="0.5" @change="settingChange('sw', $event)" :value="setting.sw" style="width: 110px;text-align: left" :min="5" :max="100"></el-input-number>
                                </el-form-item>
                                <el-form-item style="margin-bottom: 5px" label="间隔:">
                                    <el-input-number :precision="3" :step="0.5" @change="settingChange('s', $event)" :value="setting.s" style="width: 110px;text-align: left"  :min="2" :max="100"></el-input-number>
                                </el-form-item>
                            </template>

                        </el-form>
                        <div v-if="templateCache.length === 0">请添加涂框格式</div>

                    </div>
                </div>
                <el-button v-else type="text" @click="clearSelectItems">重做</el-button>
            </el-tab-pane>
            <el-tab-pane label="主观题" name="subjective">
                <el-form size="mini" label-width="140px" label-position="left">
                    <el-form-item

                            v-for="item in subjectiveQuestions" :label="`${item.paperIndex}题-${item.score}分`" :key="item.questionId+item.questionIndex" >
                        <span>区域:{{item.rectNumber}}个</span>
                        <el-button
                                @click="changeModel('subjective', item)"
                                plain
                                   :disabled="model==='subjective' && item.questionId !== currentSubjective.questionId && item.questionIndex !== currentSubjective.questionIndex"
                                   :type="model==='subjective' && item.questionId === currentSubjective.questionId && item.questionIndex === currentSubjective.questionIndex ? 'warning' : 'primary'">
                            {{
                                model==='subjective' && item.questionId === currentSubjective.questionId && item.questionIndex === currentSubjective.questionIndex
                            ? "停止" : "添加"
                            }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
<!--
        <el-image :src="ts" style="width: 100px;height: 100px"></el-image>
-->

    </div>
</div>
<!--<script src="/src/ImageUtil.js"></script>-->
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>

<!-- 引入组件库 -->
<script src="js/elementui.js"></script>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>-->
<script src="js/fabric.js"></script>
<!--
<script src="/js/index.js"></script>
-->


<!--<script></script>-->
<script>
</script>
</body>
</html>